<template>
    <a-modal v-model:visible="allocationVisible" title="仓库货位管理" width="1000px">
        <div class="btnBox">
            <a-button type="primary">添加</a-button>
            <a-button type="primary" danger style="margin-left: 20px;">批量删除</a-button>
        </div>
        <a-table
          :dataSource="dataSource"
          :columns="columns">
        </a-table>
    </a-modal>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import { reactive, ref, toRefs  } from '@vue/reactivity'
const columns = [{
    title: '位置（区域）',
    dataIndex: 'address',
    key: 'address'
}, {
    title: '排序',
    dataIndex: 'sort',
    key: 'sort'
}, {
    title: '操作',
    dataIndex: 'actions',
    key: 'actions'
}]
export default defineComponent({
    setup() {
        let allocationVisible = ref(false)
        let dataSource = reactive([])
        const state = reactive({
            selectRowKeys: []
        })
        const showAllocation = () => {
            allocationVisible.value = true
        }
        const onSelectChange = selectedRowKeys => {
            state.selectedRowKeys = selectedRowKeys
        }
        return {
            allocationVisible,
            showAllocation,
            columns,
            dataSource,
            onSelectChange,
            ...toRefs(state)
        }
    },
})
</script>

<style lang="scss" scoped>
.btnBox {
    margin-bottom: 20px;
}
</style>
